<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="./js/M_select/M_select.css">
    <link href="css/buttonStyle.css" rel='stylesheet' type='text/css' />
    <script src="js/jquery-3.3.1.js"></script>
    <script src="layer/layer.js"></script>
    <script src="js/M_select/M_select.js"></script>
    <script src="json/select_json.json"></script>
</head>
<body>
    <div style="width:550px; height:450px;padding:10px;border:1px solid #EEEEEE;">
        <h2>确认订单</h2>
        <div style="display:inline-block;width: 540px;">
            <select id="addressList" class="select03">
            </select>
        </div>
        <div style="float: left;padding: 4px 70px 0px 70px;border:1px solid #EEEEEE;" id="productInfo">

        </div>
        <div style="float: left;padding: 200px 0px 0px 60px;width: 200px" id="action4Product">
            <a href="#" onclick="placeOrder()" style="padding:20px 80px 20px 80px" class="hvr-bounce-to-top button">购买</a>
        </div>
    </div>
</body>
</html>

<script>
    var userid;
    var productsize;
    var productnum;
    //调用检测自己的登录状态
    proveMe();

    //检测自己的登录状态
    function proveMe() {
        $.ajax({
            type:'post',
            url:'/user/proveMe',
            data:'',
            cache:false,
            dataType:'json',
            success:function(data){
                //登陆成功，则...
                if(data.code==200){
                    var user = data.data.user;
                    userid = user.userid;
                    var account = user.account;
                    var username = user.username;
                    var email = user.email;
                    //获得该用户所有地址的数据
                    getAddresses();
                    //获得商品信息
                    getProductInfo();
                }
            }
        });
    }

    //获取该用户所有地址的数据
    function getAddresses() {

        var value = "userid="+userid;

        $.ajax({
            type:'get',
            url:'/address/selectListAddress',
            data:value,
            cache:false,
            dataType:'json',
            success:function(data){
                //打印地址信息
                showAddresses(data);
            }
        });
    }

    //显示地址信息
    function showAddresses(list) {

        $("#addressList").empty();
        //打印地址信息
        for(var i=0; i<list.length; i++) {
            var addressid = list[i].addressid;
            var receiver = list[i].receiver;
            var phonenum = list[i].phonenum;
            var addressvalue = list[i].addressvalue;
            $("#addressList").append("<option value="+addressid+">收件人："+receiver+"&nbsp;&nbsp;联系方式："+ phonenum +"&nbsp;&nbsp;详细地址："+ addressvalue +"</option>");
        }

        showSelect();
    }

    //初始化下拉框
    function showSelect() {
        $(".select03").M_select({
            "ico":"3",
            "radius":"10px",
            "Title":"--选择默认地址--",
            "inputName":"selected_value"
        });
    }

    //得到一个商品的详细信息
    function getProductInfo() {
        var url = window.location.search; /* 获取属性（“?”后面的分段） */
        var data = url.split("?"); //得到所有的参数
        var listData = data[1].split("&");  //分割参数
        $.ajax({
            type: 'get',
            url: '/product/selectById',
            data: listData[0]+'&'+listData[1],
            cache: false,
            dataType: 'json',
            success: function (data) {
                //调用显示商品信息函数
                showProduct(data, listData[1], listData[2]);
            }
        })
    }

    //显示商品信息
    function showProduct(data, pn, ps) {
        productnum  = pn.split("=")[1];
        productsize  = ps.split("=")[1];
        productid = data.productid;
        var productname = data.productname;
        var productprice = data.productprice;
        var producttype = data.producttype;
        var imageurl = data.imageurl;
        var productdate = data.productdate;
        var productsales = data.productsales;
        var totalPrice = productprice * productnum;

        //刷新商品信息
        $("#productInfo").empty();
        $("#productInfo").append("<span style='list-sytle:none;'>"+
            "<img style='height: 120px;width:120px; align:absmiddle' src='../"+imageurl+"' class='img-responsive' alt=''>"+
            "<h5>"+productname+"</h5>"+
            "<p>尺码："+productsize+"</p>"+
            "<p>数量："+productnum+"</p>"+
            "<p>单价：￥"+productprice+"</p>"+
            "<p>总价：￥"+totalPrice+"</p>"+
            "</span>");

    }
    
    //下订单
    function placeOrder() {
        var address = $("#addressList").find("option:selected").val();
        $.ajax({
            async: false,
            type: 'post',
            url: '/orders/placeOrder',
            data: 'productid='+productid+'&productnum='+productnum+'&productsize='+productsize+'&userid='+userid+'&addressid='+address,
            cache: false,
            dataType: 'json',
            success: function (data) {
                //判定是否登陆
                if(data.status == 401){
                    layer.msg(data.data);
                }else if(data.status == 200){
                    layer.confirm('为订单付款？', {
                        btn: ['支付','取消'] //按钮
                    }, function() {
                        //为商品支付
                        $("#action4Product").empty();
                        $("#action4Product").append("<b>请前往我的订单中查看该订单信息！！</b>");
                        pay4Product(data.orderId);
                    }, function(){
                        $("#action4Product").empty();
                        $("#action4Product").append("<b>请前往我的订单中查看该订单信息！！</b>");
                    });
                }else{
                    layer.msg(data.data);
                }
            }
        })
    }

    //为订单支付
    function pay4Product(orderid) {
        $.ajax({
            async: false,
            type: 'post',
            url: '/orders/pay4Order',
            data: 'orderid='+orderid+'&userid='+userid,
            cache: false,
            dataType: 'json',
            success: function (data) {
                if(data.status == 200){
                    layer.msg('支付成功');
                }else if(data.status == 401){
                    layer.msg('请先登录！');
                }else {
                    layer.msg('支付超时！请重试');
                }
            }
        })
    }

</script>